<!-- 优惠券中心  -->
<template>
  <s-layout title="卡包" :bgStyle="{ color: '#f2f2f2' }">
    <su-sticky bgColor="#fff">
      <su-tabs
        :list="tabMaps"
        :scrollable="false"
        @change="onTabsChange"
        :current="state.currentTab"
      ></su-tabs>
    </su-sticky>
    <!-- 活动 -->
    <scroll-view
      :scroll-top="scrollTop"
      scroll-y="true"
      class="scroll-Y"
      @scrolltoupper="upper"
      @scrolltolower="lower"
      @scroll="scroll"
    >
      <view
        :class="status == 3 ? 'list1' : 'list'"
        v-for="(item, index) in list"
        :key="index"
      >
        <view :class="status == 3 ? 'listview1' : 'listview'">
          <view>{{ status == 3 ? "电影卡" : "蛋糕卡" }}</view>
          <view style="font-size: 24rpx; margin-top: 10rpx">{{
            item.createTime
          }}</view>
          <view
            style="
              margin-top: 40rpx;
              display: flex;
              justify-content: space-between;
            "
          >
            <span>金额:{{ item.price }}元</span>
            <span>余额：{{ item.remainingAmount }}元</span>
          </view>
        </view>
      </view>
    </scroll-view>
  </s-layout>
</template>

<script setup>
import sheep from "@/sheep";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { computed, reactive } from "vue";
import _, { clone } from "lodash";
import { ref } from "vue";

const pagination = {
  data: [],
  page: 1,
  total: 0,
  size: 10,
};
// 数据
const state = reactive({
  currentTab: 0,
  pagination: clone(pagination),
  loadStatus: "",
  type: "",
});

const tabMaps = [
  {
    name: "电影卡",
    value: "3",
  },
  {
    name: "蛋糕卡",
    value: "1",
  },
];

const list = ref([]);

// 获取用户充值卡列表，/h5/getUserRechargeableCard
const cardlist = async () => {
  const data = await sheep.$api.order.getUserRechargeableCard({
    cardType: 3,
  });
  list.value = data.data;
  console.log(list.value, "我的值");
};
cardlist();

const lower = async () => {
  console.log("滚动到底部了");
};

const status = ref(3);
async function onTabsChange(e) {
  status.value = e.value;
  const data = await sheep.$api.order.getUserRechargeableCard({
    cardType: e.value,
  });
  list.value = data.data;
  console.log(e.value, data, "猛男");
}
async function getActivity() {
  state.loadStatus = "loading";
  const res = await sheep.$api.coupon.list({
    page: state.pagination.page - 1,
    size: state.pagination.size,
  });
  const { content, totalElements, totalPages } = res;
  state.pagination.data = _.concat(state.pagination.data, content);
  state.pagination.total = totalElements;
  if (state.pagination.page < totalPages) {
    state.loadStatus = "more";
  } else {
    state.loadStatus = "noMore";
  }
}

async function getCoupon() {
  state.loadStatus = "loading";
  let res = await sheep.$api.coupon.userCoupon(
    { type: state.currentTab },
    { page: state.pagination.page - 1, size: state.pagination.size }
  );
  const { content, totalElements, totalPages } = res;
  state.pagination.data = _.concat(state.pagination.data, content);
  state.pagination.total = totalElements;
  if (state.pagination.page < totalPages) {
    state.loadStatus = "more";
  } else {
    state.loadStatus = "noMore";
  }
}
async function getBuy(id) {
  const res = await sheep.$api.coupon.get(id);
  if (res) {
    uni.showToast({
      title: "领取成功",
    });
    setTimeout(() => {
      state.pagination.data = [];
      getActivity();
    }, 1000);
  }
}

// 加载更多
function loadmore() {
  if (state.loadStatus !== "noMore") {
    state.pagination.page++;
    if (state.currentTab == 0) {
      getActivity();
    } else {
      getCoupon();
    }
  }
}
onLoad((Option) => {
  if (Option.type === "all" || !Option.type) {
    getActivity();
  } else {
    state.type = Option.type;
    Option.type === "geted"
      ? (state.currentTab = 1)
      : Option.type === "used"
      ? (state.currentTab = 2)
      : (state.currentTab = 3);
    getCoupon();
  }
});
onReachBottom(() => {
  loadmore();
});
</script>
<style lang="scss" scoped>
.card-btn {
  // width: 144rpx;
  padding: 0 16rpx;
  height: 50rpx;
  border-radius: 40rpx;
  background: linear-gradient(
    90deg,
    var(--ui-BG-Main),
    var(--ui-BG-Main-gradient)
  );
  color: #ffffff;
  font-size: 24rpx;
  font-weight: 400;
}
.border-btn {
  background: linear-gradient(
    90deg,
    var(--ui-BG-Main-opacity-4),
    var(--ui-BG-Main-light)
  );
  color: #fff !important;
}
.disabled-btn {
  background: #cccccc;
  background-color: #cccccc !important;
  color: #fff !important;
}

.scroll-Y {
  height: 70vh;
  margin-top: 20rpx;
}

.list {
  width: 90%;
  margin: 20rpx auto;
  border-radius: 20rpx;
  background: linear-gradient(to right, #ffc39e, #ff8273);
  font-weight: 700;
  padding: 10rpx;
}
.list1 {
  width: 90%;
  margin: 20rpx auto;
  border-radius: 20rpx;
  background: linear-gradient(to right, #454756, #333243);
  font-weight: 700;
  padding: 10rpx;
}

.listview {
  border-radius: 20rpx;
  height: 200rpx;
  background: linear-gradient(to right, #ffdcbd, #ff9f99);
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 34rpx;
  color: #fd9744;
}

.listview1 {
  border-radius: 20rpx;
  height: 200rpx;
  background: linear-gradient(to right, #4a4b56, #373541);
  box-sizing: border-box;
  border: #c8b17c solid 2rpx;
  padding: 20rpx;
  font-size: 34rpx;
  color: #c8b17c;
}
</style>
